<template>
  <nav class="navbar">
    <div class="navbar-container">
      <!-- Logo Section -->
      <div class="navbar-logo">
        <router-link to="/" class="logo-link">
          <img :src="logoUrl" alt="FreeConvert Logo" class="logo-image" width="36" height="36" loading="eager" decoding="async" fetchpriority="high"/>
          <span class="logo-text">Free Convert</span>
        </router-link>
      </div>

      <!-- Mobile Menu Toggle Button -->
      <button class="mobile-menu-toggle" @click="toggleMobileMenu">
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
      </button>

      <!-- Navigation Links -->
      <div class="navbar-menu" :class="{ 'mobile-menu-open': mobileMenuOpen }">
        <!-- 转变 Dropdown -->
        <div class="nav-item dropdown" @mouseenter="openDropdown('convert')" @mouseleave="closeDropdown">
          <router-link to="/" class="nav-link" :class="{ 'active': isConverterPage }" @click="handleMobileLinkClick">
            转变 <span class="dropdown-icon" :class="{ 'rotated': activeDropdown === 'convert' }">▼</span>
          </router-link>
          
          <!-- Dropdown Menu -->
          <Transition name="dropdown-fade">
            <div v-if="activeDropdown === 'convert' || mobileMenuOpen" class="dropdown-menu convert-dropdown">
              <!-- 视频&声音的 -->
              <div class="dropdown-column">
                <div class="column-header">
                  <img :src="iconVideoUrl" width="45" height="30" loading="eager" decoding="async" fetchpriority="high"/>
                  <span class="column-title">视频&声音的</span>
                </div>
                <div class="column-content">
                  <!-- <a href="#" class="dropdown-item" @click.prevent>Video to MP3</a> -->
                </div>
              </div>
              
              <!-- 图像 -->
              <div class="dropdown-column">
                <div class="column-header">
                  <img :src="iconImageUrl" width="45" height="30" loading="eager" decoding="async" fetchpriority="high"/>
                  <span class="column-title">图像</span>
                </div>
                <div class="column-content">
                  <router-link to="/file-to-svg" class="dropdown-item" :class="{ 'active': isFileToSvgPage }" @click="handleMobileLinkClick">SVG Converter</router-link>
                  <router-link to="/image-matting" class="dropdown-item" :class="{ 'active': isImageMattingPage }" @click="handleMobileLinkClick">Image Matting</router-link>
                  <!-- <a href="#" class="dropdown-item" @click.prevent>ICO Converter</a> -->
                </div>
              </div>
              
              <!-- PDF & 文件 -->
              <div class="dropdown-column">
                <div class="column-header">
                  <img :src="iconPdfUrl" width="45" height="30" loading="eager" decoding="async" fetchpriority="high"/>
                  <span class="column-title">PDF & 文件</span>
                </div>
                <div class="column-content">
                  <router-link to="/docx-to-pdf" class="dropdown-item" :class="{ 'active': isDocxToPdfPage }" @click="handleMobileLinkClick">DOCX to PDF</router-link>
                </div>
              </div>
              
              <!-- GIF -->
              <div class="dropdown-column">
                <div class="column-header">
                  <img :src="iconGifUrl" width="45" height="30" loading="eager" decoding="async" fetchpriority="high"/>
                  <span class="column-title">GIF</span>
                </div>
                <div class="column-content">
                  <router-link to="/" class="dropdown-item" :class="{ 'active': isVideoToGifPage }" @click="handleMobileLinkClick">Video to GIF</router-link>
                </div>
              </div>
            </div>
          </Transition>
        </div>
      </div>

      <div class="navbar-actions">
        <router-link to="/user" class="btn-user">
          <img src="https://free-1325650170.cos.ap-guangzhou.myqcloud.com/free_convert/user-logo.svg" width="25" height="20"/>
          主页
        </router-link>
      </div>
    </div>

    <!-- Mobile Overlay -->
    <div v-if="mobileMenuOpen" class="mobile-overlay" @click="toggleMobileMenu"></div>
  </nav>
</template>

<script setup>
import { ref, computed, nextTick, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import ConvertDropdownIcons from './ConvertDropdownIcons.vue'
// 通过打包器生成指纹URL，提升缓存与加载稳定性
import logoUrl from '../assets/freeconvert.svg'
import iconVideoUrl from '../assets/vido.svg'
import iconImageUrl from '../assets/image.svg'
import iconPdfUrl from '../assets/pdf&file.svg'
import iconGifUrl from '../assets/gif.svg'

const route = useRoute()
const activeDropdown = ref(null)
const mobileMenuOpen = ref(false)
const searchOpen = ref(false)
const searchInput = ref(null)

// 判断当前是否是转换器页面（包括所有转换相关页面）
const isConverterPage = computed(() => {
  return route.path === '/'
    || route.path === '/file-to-svg'
    || route.path === '/image-matting'
    || route.path === '/docx-to-pdf'
    || route.path === '/success'
    || route.path === '/svg-success'
    || route.path === '/docx-pdf-success'
    || route.path.startsWith('/matting-success')
})

// 判断当前页面是否是视频转GIF
const isVideoToGifPage = computed(() => {
  return route.path === '/' || route.path === '/success'
})

// 判断当前页面是否是文件转SVG
const isFileToSvgPage = computed(() => {
  return route.path === '/file-to-svg' || route.path === '/svg-success'
})

// 判断当前页面是否是图片抠图
const isImageMattingPage = computed(() => {
  return route.path === '/image-matting' || route.path.startsWith('/matting-success')
})

const isDocxToPdfPage = computed(() => {
  return route.path === '/docx-to-pdf' || route.path === '/docx-pdf-success'
})

const openDropdown = (name) => {
  activeDropdown.value = name
}

const closeDropdown = () => {
  activeDropdown.value = null
}

const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
  // 在移动端关闭时也关闭下拉菜单
  if (!mobileMenuOpen.value) {
    activeDropdown.value = null
  }
}

const handleMobileLinkClick = () => {
  // 在移动端点击链接后关闭菜单
  if (window.innerWidth <= 768) {
    mobileMenuOpen.value = false
    activeDropdown.value = null
  }
}

const toggleSearch = async () => {
  searchOpen.value = !searchOpen.value
  if (searchOpen.value) {
    await nextTick()
    searchInput.value?.focus()
  }
}

// 预加载关键SVG资源，降低移动端首开延迟
onMounted(() => {
  const icons = [logoUrl, iconVideoUrl, iconImageUrl, iconPdfUrl, iconGifUrl]
  icons.forEach((href) => {
    const link = document.createElement('link')
    link.rel = 'preload'
    link.as = 'image'
    link.href = href
    document.head.appendChild(link)
    // 短时间后移除标签，不影响缓存
    setTimeout(() => link.remove(), 2000)
  })
})
</script>

<style scoped>
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
}

.navbar-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  position: relative;
}

/* Logo Section */
.navbar-logo {
  flex-shrink: 0;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #1e293b;
  transition: transform 0.2s;
}

.logo-link:hover {
  transform: scale(1.02);
}

.logo-image {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.15));
}

.logo-text {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Navigation Menu */
.navbar-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-start;
  margin-left: 48px;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #475569;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
}

.nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.nav-link:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  color: #667eea;
  transform: translateY(-1px);
}

.nav-link:hover::before {
  width: 80%;
}

.dropdown-icon {
  font-size: 0.65rem;
  transition: transform 0.2s;
  display: inline-block;
}

.dropdown-icon.rotated {
  transform: rotate(180deg);
}

.nav-link.active::before {
  width: 80%;
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #e5e7eb;
  z-index: 1000;
}

.convert-dropdown {
  display: flex;
  padding: 24px 0;
  min-width: 800px;
}

.dropdown-column {
  flex: 1;
  min-width: 180px;
  padding: 0 16px;
  border-right: 1px solid #e5e7eb;
}

.dropdown-column:last-child {
  border-right: none;
}

.column-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 12px 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.column-icon {
  font-size: 1.2rem;
}

/* SVG icon wrapper */
.column-header :deep(.dropdown-icon-svg) {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.column-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
}

.column-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dropdown-item {
  display: block;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: #475569;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s;
  white-space: nowrap;
  text-align: left;
}

.dropdown-item:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  color: #667eea;
  transform: translateX(4px);
}

.dropdown-item.active {
  background: #e0e7ff;
  color: #667eea;
  font-weight: 600;
}

.dropdown-item.active:hover {
  background: #dbeafe;
  color: #667eea;
  transform: translateX(4px);
}

/* Dropdown Animations */
.dropdown-fade-enter-active {
  animation: dropdownFadeIn 0.2s ease-out;
}

.dropdown-fade-leave-active {
  animation: dropdownFadeOut 0.15s ease-in;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dropdownFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}

/* Actions Section */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #475569;
  transition: all 0.2s;
}

.search-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.btn-user {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #667eea;
  background: white;
  border: 2px solid #667eea;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-user::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.btn-user:hover {
  color: white;
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.btn-user:hover::before {
  left: 0;
}

.btn-register {
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.btn-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
}

.btn-register:active {
  transform: translateY(-1px);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
  z-index: 1001;
}

.mobile-menu-toggle:hover {
  background: #f1f5f9;
}

.hamburger-line {
  width: 100%;
  height: 2px;
  background: #475569;
  border-radius: 2px;
  transition: all 0.3s;
}

/* Mobile Overlay */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  display: none;
}

/* Search Overlay */
.search-overlay {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  padding-top: 60px;
  z-index: 999;
}

.search-container {
  max-width: 600px;
  width: 90%;
  height: fit-content;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  padding: 12px 20px;
  gap: 12px;
  animation: searchSlideDown 0.3s ease-out;
}

@keyframes searchSlideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.1rem;
  padding: 8px;
  color: #1e293b;
}

.search-input::placeholder {
  color: #94a3b8;
}

.search-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #f1f5f9;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  color: #475569;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-close:hover {
  background: #e2e8f0;
  color: #1e293b;
}

/* Transitions */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .navbar-menu {
    gap: 4px;
  }

  .nav-link {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .navbar-container {
    padding: 0 16px;
    height: 56px;
  }

  .logo-text {
    display: none;
  }

  .navbar-menu {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 8px;
    margin-left: 0;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 999;
  }

  .navbar-menu.mobile-menu-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 1rem;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    border: 1px solid #e5e7eb;
    margin-top: 8px;
    min-width: auto;
    width: 100%;
  }
  
  .convert-dropdown {
    flex-direction: column;
    min-width: auto;
    width: 100%;
    padding: 16px 0;
  }
  
  .dropdown-column {
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    padding: 16px;
  }
  
  .dropdown-column:last-child {
    border-bottom: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .mobile-overlay {
    display: block;
  }

  .btn-user,
  .btn-register {
    font-size: 0.85rem;
    padding: 6px 14px;
  }

  .search-btn {
    width: 36px;
    height: 36px;
  }

  .search-overlay {
    top: 56px;
    padding-top: 40px;
  }
}

@media (max-width: 480px) {
  .navbar-actions {
    gap: 8px;
  }

  .btn-user {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
}
</style>